<template>
  <el-dialog
    v-model="visible"
    title="任务详情"
    width="900px"
    :close-on-click-modal="false"
  >
    <div v-loading="loading" class="detail-content" v-if="taskDetail">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-heading">📌 任务基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="任务ID">
            {{ taskDetail.task }}
          </el-descriptions-item>
          <el-descriptions-item label="任务名称">
            {{ taskDetail.task_name }}
          </el-descriptions-item>
          <el-descriptions-item label="任务类型">
            <el-tag
              :type="taskDetail.task_type === 'auto' ? 'success' : 'info'"
              size="small"
            >
              {{ taskDetail.task_type === "auto" ? "自动" : "手动" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="扫描时间">
            {{ taskDetail.scan_time }}
          </el-descriptions-item>
          <el-descriptions-item label="扫描耗时">
            {{ taskDetail.scan_duration }}秒
          </el-descriptions-item>
          <el-descriptions-item label="创建者">
            {{ taskDetail.created_by }}
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            {{ taskDetail.remark || "无" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 扫描配置 -->
      <div class="detail-section" v-if="taskDetail.scan_config">
        <h3 class="section-heading">⚙️ 扫描配置</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="目标IP" :span="2">
            <div v-if="Array.isArray(taskDetail.scan_config.target_ips)">
              <el-tag
                v-for="(ip, index) in taskDetail.scan_config.target_ips"
                :key="index"
                size="small"
                style="margin-right: 8px; margin-bottom: 4px"
              >
                {{ ip }}
              </el-tag>
            </div>
            <span v-else>{{ taskDetail.scan_config.target_ips || "-" }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="端口范围">
            {{ taskDetail.scan_config.ports || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="扫描类型">
            {{ taskDetail.scan_config.scan_type || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 资产统计 -->
      <div class="detail-section">
        <h3 class="section-heading">📊 资产统计</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="一致资产">
            <span class="stat-value consistent">
              {{ taskDetail.asset_stats?.consistent?.count || 0 }}
            </span>
            <span class="stat-percentage">
              ({{ taskDetail.asset_stats?.consistent?.percentage || 0 }}%)
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="未报备资产">
            <span class="stat-value unreported">
              {{ taskDetail.asset_stats?.unreported?.count || 0 }}
            </span>
            <span class="stat-percentage">
              ({{ taskDetail.asset_stats?.unreported?.percentage || 0 }}%)
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="疑似资产">
            <span class="stat-value suspected">
              {{ taskDetail.asset_stats?.suspected?.count || 0 }}
            </span>
            <span class="stat-percentage">
              ({{ taskDetail.asset_stats?.suspected?.percentage || 0 }}%)
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="总资产数">
            <span class="stat-value total">
              {{ taskDetail.asset_stats?.total || 0 }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 推理进度 -->
      <div class="detail-section">
        <h3 class="section-heading">🔍 推理进度</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="待推理">
            {{ taskDetail.inference_progress?.not_inferred || 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="已推理">
            {{ taskDetail.inference_progress?.inferred || 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="已确认">
            {{ taskDetail.inference_progress?.confirmed || 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="已拒绝">
            {{ taskDetail.inference_progress?.rejected || 0 }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="progress-wrapper">
          <div class="progress-label">
            推理进度:
            {{ taskDetail.inference_progress?.progress_percentage || 0 }}%
          </div>
          <el-progress
            :percentage="
              taskDetail.inference_progress?.progress_percentage || 0
            "
            :color="
              getProgressColor(
                taskDetail.inference_progress?.progress_percentage || 0
              )
            "
            :stroke-width="12"
          />
        </div>
      </div>

      <!-- 高危资产 -->
      <div class="detail-section" v-if="taskDetail.high_risk_stats">
        <h3 class="section-heading">⚠️ 高危资产</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="高危资产数量">
            <el-tag
              v-if="taskDetail.high_risk_stats.has_high_risk"
              type="danger"
              size="small"
            >
              {{ taskDetail.high_risk_stats.high_risk_count }}个
            </el-tag>
            <span v-else class="no-risk">无高危资产</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
      <el-button
        type="primary"
        @click="handleExportReport"
        :disabled="!taskDetail?.task"
      >
        导出报告
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

// 定义props
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  taskDetail: {
    type: Object,
    default: () => null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

// 定义emits
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "export-report", taskId: string): void;
}>();

// visible computed 属性
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
  if (percentage < 30) return "#f56c6c";
  if (percentage < 70) return "#e6a23c";
  return "#67c23a";
};

// 导出报告
const handleExportReport = () => {
  if (props.taskDetail?.task) {
    emit("export-report", props.taskDetail.task);
  }
};

// 取消
const handleCancel = () => {
  emit("update:modelValue", false);
};
</script>

<style scoped lang="scss">
.detail-content {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
}

.detail-section {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-heading {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 10px 0;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-value {
  font-weight: 500;
  font-size: 16px;

  &.consistent {
    color: #67c23a;
  }

  &.unreported {
    color: #e6a23c;
  }

  &.suspected {
    color: #f56c6c;
  }

  &.total {
    color: #409eff;
    font-size: 18px;
  }
}

.stat-percentage {
  color: #909399;
  font-size: 14px;
  margin-left: 4px;
}

.progress-wrapper {
  margin-top: 15px;

  .progress-label {
    margin-bottom: 8px;
    color: #606266;
    font-size: 14px;
  }
}

.no-risk {
  color: #909399;
  font-size: 14px;
}
</style>
